<template>
    <div id="loginRegisterContent">
    <div :class="[isActive?'login':'login_change']">
      <div class="login_register" v-show="showLogin_Register">
        <i class="icon"></i>
        <div class="login-wrap" v-show="showLogin">
            <h3><font color="white">登录</font></h3>
            <p class="login-wrap-p" v-show="showTishi">{{tishi}}</p>
            <input type="text" placeholder="请输入账号名" v-model="useraccount">
            <input type="password" placeholder="请输入密码" v-model="userpassword">
            <button @click="login();changeLoginCss();getHistoryRecord();getHistoryRecordInfo()">登录</button>
            <span v-on:click="ToRegister"><font color="white">没有账号？马上注册</font></span>
        </div>

        <div class="register-wrap" v-show="showRegister">
            <h3><font color="white">注册</font></h3>
            <p class="login-wrap-p" v-show="showTishi">{{tishi}}</p>
            <input type="text" placeholder="请输入用户昵称" v-model="newUsername">
            <input type="text" placeholder="请输入账号名" v-model="newAccount">
            <input type="password" placeholder="请输入密码" v-model="newPassword">
            <input type="text" placeholder="请输入电话号码" v-model="newPhone">
            <input type="text" placeholder="请输入邮箱" v-model="newEmail">
            <button @click="register()">注册</button>
            <span v-on:click="ToLogin"><font color="white">已有账号？马上登录</font></span>
        </div>
      </div>
    </div>

    <div v-show="showUserCenter">
        <div id="Self">
        <!-- 头部布局 -->
        <div class="head">
        <!-- 头部布局背景 -->
        <div class="head_background">
            <!-- <img src="~@/../static/images/selfCenterHead_pic.jpg" class="selfCenterHeadPic"> -->
            <!-- 头部显示的用户头像及用户昵称 -->
        <div class="userHead">
            <div class="head_pic">
                <i class="user_head_pic"></i>
            </div>
            <div class="head_basic">
                <!-- 从数据库中查询显示于此<input type="text" v-model="computedUserName"> -->
                <span class="head_name"><h2>欢迎您，</h2><p>{{getUserName}}</p></span>
                <div>
                    <span>个人简介</span>
                    <input type="button" value="退出登录" @click="loginOut()">
                </div>
                <!-- 右侧显示用户基本信息 -->
                <!-- <div class="right_info">
                    <span>个人电话：<input type="text"></span>
                    <span>个人邮箱：<input type="text"></span>
                    <span></span>
                </div> -->
            </div>
        </div>
        </div>
        </div>
        <!-- 用户中心所有基本功能 -->
        <div class="selfContent">
            <h1 class="content_h1">EveryThing</h1>
            <!-- 初步决定是将内容作为选项卡的形式 -->
            <div class="content_select_card">
                <div class="tab-hd">
		            <a href="javascript:;" :class="{'now':index==1}" @click="index=1"><span>个人主页</span></a>
		            <a href="javascript:;" :class="{'now':index==2}" @click="index=2"><span>关注内容</span></a>
		            <a href="javascript:;" :class="{'now':index==3}" @click="index=3"><span>收藏</span></a>
	            </div>
	            <div class="tab-bd">
		            <div class="tab-item" v-show="index==1">
                        <div class="my_video">
                            <span><h2>我的视频</h2></span>
                            <span class="">还没有上传过视频哦~<router-link to="FileUpload" class="tab-item-span-a">立即上传</router-link></span>
                        </div>
                        <br>
                        <hr>
                        <div class="my_article">
                            <span><h2>我的文章</h2></span>
                            <span class="">还没有发布过文章哦~<router-link to="columnContribution" class="tab-item-span-a">立即发布</router-link></span>
                        </div>
                        <br>
                        <hr>
                        <div class="my_tag">
                            <span><h2>创建的标签</h2></span>
                            <div>
                                <p>共享内容可以以分类标签被找到~</p>
                            </div>
                            <div class="my_tag_span_btn">
                                <a href="">
                                    <span>
                                        创建标签
                                    </span>
                                </a>
                            </div>
                        </div>
                    </div>
		            <div class="tab-item" v-show="index==2">22</div>
		            <div class="tab-item" v-show="index==3">333</div>
	            </div>
            </div>
        </div>
        <!-- 用户浏览记录 -->
        <div class="history">
            <h1 class="content_h1">AnyThing That You Looked</h1>
            <div class="resultDiv" v-for="(resource,index) in getHistoryRecordResourceId" :key="resource.id" @click="giveUrlToVideoView(resource,index)">
                <div class="singleContent">
                    <router-link to="videoview">
                        <div class="routerDiv">
                            <img :src="resource.resourceCover" style="width:120px;height:100px">
                            <p>{{resource.resourceTitle}}</p>
                        </div>
                    </router-link>
                </div>
            </div>
        </div>
        <br/>
        <hr>
        <div>

        </div>
        <br/>
    </div>    
      </div>

    </div>
</template>

<script>
import lgoinBckground from '@/../static/images/login_background2.jpg'
import axios from 'axios';
import {setCookie,getCookie} from '../assets/js/cookie.js'

//引入VueEvent公共JS
import VueEvent from '../model/VueEvent.js'
import { setTimeout } from 'timers';

export default {
  // props:["getUserName"],
  mounted(){
  /*页面挂载获取cookie，如果存在username的cookie，则跳转到主页，不需登录*/
    // if(getCookie('useraccount')){
    //     this.showUserCenter = true
    //     this.showLogin = false
    //     this.showRegister = false
    //     this.showLogin_Register = false
    //     this.changeLoginCss()
    //     this.getUserName=getCookie('username')
    // }else{
    //     this.showUserCenter = false
    //     this.showLogin = true
    //     this.showRegister = false
    //     this.showLogin_Register = true
    // }
    this.loginCheck();
    this.getHistoryRecord();
    this.getHistoryRecordInfo();
  },
  username:'',
  password:'',
    data(){
      return{
        showLogin: true,
                showRegister: false,
                showTishi: false,
                tishi: '',
                showUserCenter:false,
                //显示整个登录注册的页面
                showLogin_Register:true,
                //登录时的用户账号与密码
                useraccount:'',
                userpassword: '',
                //登录时获得token令牌，将其保存在cookie中
                userTokenWeb:'',
                //注册时所填的五项基本信息
                newUsername: '',
                newAccount:'',
                newPassword: '',
                newPhone:'',
                newEmail:'',
                data_username:'',
                //登录的div在登录后会改变其样式
                isActive:true,
                //选项卡切换
                index:1,
                //跳转后获得的用户名
                getUserName:'',
                //查询历史记录后得到的resourceId
                getHistoryRecordResourceId:[]
      }
    },
    
    methods:{
      //注册方法
      register(){
    if(this.newAccount == "" || this.newPassword == ""){
        alert("请输入用户名或密码")
    }else if(this.newUsername == ""){
        this.tishi = "请输入用户昵称" 
        this.showTishi = true
    }else if(this.newPhone == ""){
      this.tishi = "请输入可使用的手机号码" 
      this.showTishi = true
    }else if(this.newEmail == ""){
      this.tishi = "请输入正确格式的邮箱"
      this.showTishi = true
    }
    else{
        // 向后台接口传输的数据，应与接口的参数名一致
        let dataCheckUserAccount = {'userAccount':this.newAccount}
        axios.post('http://localhost:8080/user/checkuseraccountrepeat',dataCheckUserAccount).then((res)=>{
          console.log(res)
          console.log(res.data)
          if(res.data == 1){
            this.tishi="账号名已被使用！"
            this.showTishi = true
          }else{
            let data = {'userAccount':this.newAccount,'userPassword':this.newPassword,'userName':this.newUsername,'userPhone':this.newPhone,'userEmail':this.newEmail}
            this.$http.post('http://localhost:8080/user/register',data).then((res)=>{
            console.log(res)
            if(res.data == 1){
                this.tishi = "注册成功"
                this.showTishi = true
                this.username = ''
                this.password = ''
                console.log(data)
                 /*注册成功之后再跳回登录页*/
                setTimeout(function(){
                    this.showRegister = false
                    this.showLogin = true
                    this.showTishi = false
                }.bind(this),1000)
            }else{
              this.tishi="服务器繁忙，请稍后重试"
              this.showTishi=true
            }
        })
          }
        })
        
    }
},
    //退出登录
    loginOut(){
      setCookie('useraccount',"",1000*1*60)
      setCookie('username',"",1000*1*60)
      setCookie('userTokenWeb',"",1000*1*60)
      this.showUserCenter = false
      this.showLogin = true
      //刷新当前页面
      this.$router.go(0)
      this.$router.push({path:'/loginRegister'});
    },
    //访问网站且免登录（验证token）
    loginCheck(){
      this.userTokenWeb = getCookie('userTokenWeb')
      let data = {'userTokenWeb':this.userTokenWeb}
      axios.post('http://localhost:8080/user/loginCheck',data).then((res)=>{
        console.log('loginCheck返回的信息是：'+res.data)
        if(res.data == 1){
        this.showUserCenter = true
        this.showLogin = false
        this.showRegister = false
        this.showLogin_Register = false
        this.changeLoginCss()
        this.getUserName=getCookie('username')
      }else{
        this.showUserCenter = false
        this.showLogin = true
        this.showRegister = false
        this.showLogin_Register = true
      }
      })
    },
    //登录(获取token)方法
    login(){
        if(this.useraccount == "" || this.userpassword == ""){
            alert("请输入用户名或密码")
            this.showUserCenter = false
            this.showLogin_Register = true
            this.isActive = false
        }else{
          //得到页面中用户的输入值
            let data = {'userAccount':this.useraccount,'userPassword':this.userpassword}
            /*接口请求*/
            this.$http.post('http://localhost:8080/user/login',data).then((res)=>{
                console.log(res)
             /*接口的传值是(-1,该用户不存在),(0,密码错误)，同时还会检测管理员账号的值*/
              if(res.data = null){
                this.tishi = "用户名或密码错误"
                this.showTishi = true
              //     this.tishi = "该用户不存在"
              //     this.showTishi = true
              // }else if(res.data == 0){
              //     this.tishi = "密码输入错误"
              //     this.showTishi = true
              // }else if(res.data == 'admin'){
              // /*路由跳转this.$router.push*/
              //     this.$router.push('/main')
              }else{
                  this.tishi = "登录成功"
                  this.showTishi = true
                  this.showUserCenter = true
                  this.showLogin = false
                  this.showRegister = false
                  this.showLogin_Register = false
                  //将后台控制器返回的token保存给userTokenWeb
                  this.userTokenWeb = res.bodyText
                  setCookie('userTokenWeb',this.userTokenWeb,1000*1*60*60)
                  console.log(this.userTokenWeb)
                  let data_useraccount = {'userAccount':this.useraccount}
                  setCookie('useraccount',this.useraccount,1000*60)
                  setTimeout(function(){
                        try {
                          this.$http.post('http://localhost:8080/user/center/userInfo',data_useraccount).then((res_userName)=>{
                          console.log(data)
                          console.log(data_useraccount)
                          console.log(res_userName)
                          console.log(res_userName.body[0])
                          console.log(res_userName.body[0].userName)
                          this.getUserName = res_userName.body[0].userName
                          setCookie('username',this.getUserName,1000*60)
                          console.log(res_userName.body[0].userName)
                          console.log(this.getUserName)
                            })
                        } catch (error) {
                          console.log(error)
                        }
                        this.showUserCenter = true
                    }.bind(this),1000)
              }
          })
      }
    },
    //登录注册下方的文字跳转方法
      ToRegister(){
        this.showRegister = true
        this.showLogin = false
        this.showTishi = false
      },
      ToLogin(){
        this.showRegister = false
        this.showLogin = true
        this.showTishi = false
      },
      //点击登录之后class为login的div会由.login变为.login_change
      changeLoginCss(){
        this.isActive = !this.isActive
      },
      //查询用户在historyRecord表里面浏览记录的id，然后得到后给this.getHistoryRecordResourceId
      //方法应重新构建逻辑，简化操作
      getHistoryRecord(){
        setTimeout(function(){
            this.getUserAccount=getCookie('useraccount')
            let data={'userAccount':this.useraccount}
            axios.post('http://localhost:8080/history/findresourceidofuser',data).then((res)=>{
                console.log(res)
                console.log(res.data)
                this.getHistoryRecordResourceId=res.data
                console.log(this.getHistoryRecordResourceId)
            })
            }.bind(this),1000*2)
        },
        //应和上面的方法整合简化，可以
      getHistoryRecordInfo(){
        // if(this.getHistoryRecordResourceId!=null){
          setTimeout(function(){
              axios.post('http://localhost:8080/resource/returnUserHistoryResource',this.getHistoryRecordResourceId).then((res)=>{
                console.log(this.getHistoryRecordResourceId)
                console.log(res)
                this.getHistoryRecordResourceId=res.data
                console.log(this.getHistoryRecordResourceId)
              })
            // }
            }.bind(this),1000*4)
      },
      //浏览记录部分加载视频URL
      giveUrlToVideoView(resource,index){
            setCookie('videoCode',resource.resourceUrl,1000*10)
        },
    }
}
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
}
body{
  margin: 0;
}
.login{
  /* position: relative;
  top: 200px;
  left:500px; */
  /* align-items: center; */
  position: fixed;
  /* top:225px;
  left: 650px; */
  width: 100%;
  height: 100%;
  background-color: #0F1015;
}
.login_change{
  width: 100%;
  height: 100%;
  background-color: #0F1015;
}
.login_register{
  position: relative;
  top: 0%;
  left: 40%;
  width: 300px;
  height: 400px;
}
.icon{
  display: inline-block;
  width: 300px;
  height: 300px;
  background-image: url('~@/../static/images/login_background2.jpg');
  background-position: center center;
  background-size: 100%;
  background-repeat: no-repeat;
}
/* 登录样式 */
.login-wrap{text-align:center;}
    input{display:block; width:250px; height:40px; line-height:40px; margin:0 auto; margin-bottom: 10px; outline:none; border:1px solid #888; padding:10px; box-sizing:border-box;}
    /* p{color:red;} */
    button{display:block; width:250px; height:40px; line-height: 40px; margin:0 auto; border:none; background-color:#41b883; color:#fff; font-size:16px; margin-bottom:5px;}
    span{cursor:pointer;}
    span:hover{color:#41b883;}
.login-wrap-p{color: red}
/* 注册样式 */
.register-wrap{text-align:center;}
    input{display:block; width:250px; height:40px; line-height:40px; margin:0 auto; margin-bottom: 10px; outline:none; border:1px solid #888; padding:10px; box-sizing:border-box;}
    /* p{color:red;} */
    button{display:block; width:250px; height:40px; line-height: 40px; margin:0 auto; border:none; background-color:#41b883; color:#fff; font-size:16px; margin-bottom:5px;}
    span{cursor:pointer;}
    span:hover{color:#41b883;}
#Self{
    background-color: #f5f5f5;
}
.head{
    margin: 1px 0px 0px 0px;
    height: 200px;
    width: 75%;
    position: relative;
    left: 12.5%;
    border: 1px solid #dbd6d6;
    box-shadow:5px 5px 10px 5px #dbd6d6;
    background-image: url('~@/../static/images/selfCenterHead_background.jpg');
    background-size: 100% 200px;
}
.userHead{
    margin: 10px 5px 5px 30px;
    display: flex;
    position: relative;
    top: 30%;
    width: 600px;
    height: 150px;
    color:black;
}
.head_background{
    position: relative;
    top: 25%;
}
.head_pic{
    width: 80px;
    height: 80px;
}
.user_head_pic{
    display: inline-block;
    width: 80px;
    height: 80px;
    background-image: url('~@/../static/images/repush.png');
    background-position: center center;
    background-size: 80px 80px;
}
.head_basic{
    width: 120px;
    height: 80px;
    margin: 5px 5px 5px 5px;
}
.right_info{
    float: right;
}
.head_name{
    width: 80px;
    height: 50px;
}
.name{
    display: block;
    width: 100px;
    height: 50px;
    color: black;
}
/* .head_background{
} */
.selfContent{
    margin: 12px 0px 0px 0px;
    height: 600px;
    width: 75%;
    position: relative;
    left: 12.5%;
    border: 1px solid #dbd6d6;
    box-shadow:5px 5px 10px 5px #dbd6d6;
    /* border-bottom: 1px solid #0000; */
}
.tab-hd { position: relative; height:36px; margin:15px 0; border-bottom:1px solid #ddd;}
.tab-hd a { float:left; padding:8px 20px; margin-right:-1px; background: #fbfaf8; border:1px solid #ddd; text-decoration: none; color: black; }
.tab-hd a:hover { background: #fff; color: #4998df; }
.tab-hd .now { padding: 8px 20px 7px; border-top:2px solid #4998df; border-bottom:1px solid #fff; background: #fff; z-index: 2; }
.tab-item-span-a{text-decoration: none;color:#4998df; text-align: center;}
.tab-item-span-a:hover{color: rgb(233, 72, 139);}
.my_tag_span_btn{
    width: 100px;
    height: 50px;
    background-color:#4998df;
    text-align: center;
    vertical-align: baseline;
    line-height: 50px;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    border-bottom-right-radius:10px;
    border-bottom-left-radius:10px;
}
.my_tag_span_btn a{
    display: inline-block;
    width: 100px;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;color:white;
}
.my_tag_span_btn a:hover{
    color: rgb(233, 72, 139);
}
.my_tag_span_btn span{
    width: 100px;
    text-align: center;
    vertical-align: top;
    font-size: 18px;
}
.content_h1{
    margin: 0px 0px 0px 15px;
}
.history{
    margin: 12px 0px 0px 0px;
    height: 600px;
    width: 75%;
    position: relative;
    left: 12.5%;
    border: 1px solid #dbd6d6;
    box-shadow:5px 5px 10px 5px #dbd6d6;
}
.my_video{
  margin-left: 35px;
}
.my_article{
  margin-left: 35px;
}
.my_tag{
  margin-left: 35px;
}
.resultDiv{
  display: flex;
}
.singleContent{
  display: flex;
}
</style>
